<!--选题组件-->
<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <!--                <label>课程类别：</label>-->
                <!--                <div class="table-query-input">-->
                <!--                    <el-cascader-->
                <!--                        ref="category"-->
                <!--                        v-model="category"-->
                <!--                        :props="categoryProps"-->
                <!--                        :show-all-levels="false"-->
                <!--                        filterable-->
                <!--                        clearable-->
                <!--                        @change="changeCategory"></el-cascader>-->
                <!--                </div>-->
                <!--                <label>学科：</label>-->
                <!--                <div class="table-query-input">-->
                <!--                    <el-cascader-->
                <!--                        ref="classification"-->
                <!--                        :key="zeroOne"-->
                <!--                        v-model="queryData.classificationId"-->
                <!--                        :props="classificationProps"-->
                <!--                        :show-all-levels="false"-->
                <!--                        filterable-->
                <!--                        clearable-->
                <!--                    ></el-cascader>-->
                <!--                </div>-->
                <label>所属学科：</label>
                <el-cascader
                    v-model="queryData.classificationId"
                    :options="classificationInfo"
                    :show-all-levels="false"
                    filterable
                    clearable
                    :props="{
                        value: 'id',
                        label: 'name',
                        emitPath: false,
                        checkStrictly: true
                    }"
                ></el-cascader>
                <label>大类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.firstType"
                        :disabled="!isShow"
                        clearable
                        placeholder="请选择"
                        @clear="cleanSecondType"
                        @change="selectQuestionType(queryData.firstType)"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <label>试题类型：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.secondTypeId"
                        clearable
                        filterable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in secondTypeIdOptions"
                            :key="'i' + item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>质量梯度：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.qualityLevel"
                        type="number"
                        max="100.00"
                        min="0.00"
                        clearable
                        placeholder="质量梯度"
                    ></el-input>
                </div>
                <label>难度：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.difficulty"
                        clearable
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in difficultyOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </div>
                <label>关键词：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.searchKey"
                        clearable
                        placeholder="关键词"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="beforeSearch"
                    >搜索
                </el-button>
            </div>
        </div>

        <div class="table-operation-box">
            <!--        <el-button-->
            <!--            type="danger"-->
            <!--            plain-->
            <!--            style="margin-bottom: 2em"-->
            <!--            :disabled="ids.length === 0"-->
            <!--            @click="tableDelete(-->
            <!--                                    '/exam/question/deleted-list',-->
            <!--                                    {-->
            <!--                                        ids: ids-->
            <!--                                    },-->
            <!--                                    true-->
            <!--                                )"-->
            <!--        >批量删除-->
            <!--        </el-button>-->
            <el-button
                type="primary"
                plain
                style="margin-bottom: 2em"
                @click="sendToparent"
                >确定
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                border
                :data="tableData"
                style="width: 100%;min-height:40em"
                row-key="id"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" min-width="55">
                </el-table-column>
                <el-table-column
                    type="index"
                    :index="indexMethod"
                    min-width="55"
                >
                </el-table-column>
                <el-table-column prop="remark" label="试题内容">
                    <template slot-scope="scope">
                        <div>
                            【难度】{{ difficulty[scope.row.difficulty] }}
                        </div>
                        <div>【题型】{{ status[scope.row.firstType] }}</div>
                        <div class="questionInfo">
                            【题干】
                            <p v-html="scope.row.stem[0].vl"></p>
                        </div>

                        <div
                            v-if="
                                status[scope.row.firstType] === '单选题' ||
                                    status[scope.row.firstType] === '多选题'
                            "
                        >
                            <div
                                v-for="(item, index) in scope.row.answer"
                                :key="index"
                                class="questionInfo"
                            >
                                {{ item.option }}、
                                <p v-html="item.content[0].vl"></p>
                            </div>
                        </div>

                        <div
                            v-if="status[scope.row.firstType] === '单选题'"
                            class="questionInfo"
                        >
                            正确答案：{{ scope.row.rightAnswer }}
                        </div>

                        <div
                            v-if="status[scope.row.firstType] === '多选题'"
                            class="questionInfo"
                        >
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                >{{ item }}</span
                            >
                        </div>

                        <div
                            v-if="status[scope.row.firstType] === '判断题'"
                            class="questionInfo"
                        >
                            正确答案：<span
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                            >
                                <span v-if="item === 1">对</span>
                                <span v-else>错</span>
                            </span>
                        </div>

                        <div
                            v-if="status[scope.row.firstType] === '填空题'"
                            class="questionInfo"
                        >
                            正确答案：
                            <p
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                v-html="item.vl[0].vl"
                            ></p>
                        </div>

                        <div
                            v-if="status[scope.row.firstType] === '简答题'"
                            class="questionInfo"
                        >
                            正确答案：
                            <p
                                v-for="(item, index) in scope.row.rightAnswer"
                                :key="index"
                                v-html="item.vl[0].vl"
                            ></p>
                        </div>

                        <div class="questionInfo">
                            <span>试题解析：</span>
                            <p v-html="scope.row.answerDesc[0].vl"></p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="go('edit-question?id=' + scope.row.id)"
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            type="warning"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/exam/question/deleted-list',
                                    {
                                        ids: [scope.row.id]
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { fetchQuestionType } from "@/api/exam.js";
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import {
    fetchCategoryChildren,
    fetchCategoryFirstStage,
    fetchClassificationChildren,
    fetchClassificationFirst,
    fetchClassificationList2
} from "@/api/course";
import { treeList2Tree } from "@/utils";

export default {
    // 选择试题
    name: "PaperQuestionSelectComponent",
    mixins: [TablePage],
    props: {
        queryData: {
            type: Object,
            default() {
                return {
                    firstType: null,
                    secondTypeId: null,
                    classificationId: null,
                    qualityLevel: null,
                    difficulty: null,
                    index: null
                };
            }
        },
        isShow: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {
            classificationInfo: [],
            zeroOne: 0,
            category: null,
            isShowEdit: false,
            options: [
                {
                    value: "singleChoice",
                    label: "单选题"
                },
                {
                    value: "multipleChoice",
                    label: "多选题"
                },
                {
                    value: "judgment",
                    label: "判断题"
                },
                {
                    value: "fill",
                    label: "填空题"
                },
                {
                    value: "text",
                    label: "简答题"
                },
                {
                    value: "combination",
                    label: "组合题"
                }
            ],
            difficultyOptions: [
                {
                    value: "easy",
                    label: "简单"
                },
                {
                    value: "normal",
                    label: "普通"
                },
                {
                    value: "difficult",
                    label: "困难"
                }
            ],
            secondTypeIdOptions: [],
            secondQueryData: {
                firstType: null
            },
            tableData: [],
            ids: [],
            categoryProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.fetchCategory
            },
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                lazyLoad: this.fetchClassification
            },
            classficationQueryData: {
                size: 1000
            }
        };
    },
    computed: {
        ...mapState({
            status: state => state.status.questionFirstType,
            difficulty: state => state.status.questionDifficulty
        })
    },
    watch: {
        actionSearch(val) {
            this.$refs.tree.filter(val);
        }
    },
    mounted() {},
    methods: {
        sendToparent() {
            this.$emit("questionSelectEvent", this.ids);
            this.toggleSelection();
            this.ids = [];
        },
        beforeSearch() {
            this.search();
        },
        indexMethod(index) {
            return (
                index +
                1 +
                (this.pageData.currentPage - 1) * this.pageData.pageSize
            );
        },
        search(queryData) {
            this.getClassfication();
            this.loadTable("/exam/question/page", queryData);
            this.selectQuestionType();
        },
        //获取课程所属科目
        getClassfication() {
            fetchClassificationList2(this.classficationQueryData).then(res => {
                this.classificationInfo = treeList2Tree(res);
            });
        },
        handleSelectionChange(val) {
            this.ids = [];
            const length = val.length;
            for (let n = 0; n < length; n++) {
                this.ids.push(val[n].id);
            }
        },
        selectQuestionType(data) {
            this.cleanSecondType();
            this.secondTypeIdOptions = [];
            this.secondQueryData.firstType = data;
            fetchQuestionType(this.secondQueryData).then(res => {
                for (let i = 0; i < res.length; i++) {
                    this.secondTypeIdOptions.push({
                        value: res[i].id,
                        label: res[i].viewName
                    });
                }
            });
        },
        cleanSecondType() {
            delete this.queryData.secondTypeId;
        },
        filterAction(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        clickSelectAction(data, checked, indeterminate) {
            const actionCode = data.id;
            if (checked) {
                this.dataForm.actionCodes.push(actionCode);
            } else {
                this.dataForm.actionCodes.splice(
                    this.dataForm.actionCodes.indexOf(actionCode)
                );
            }
        },
        changeCategory(data) {
            this.category = this.$refs.category.getCheckedNodes()[0].value;
            this.dataForm.classificationId = [];
            ++this.zeroOne;
        },
        fetchCategory(node, resolve) {
            const { level } = node;
            if (!node.data) {
                fetchCategoryFirstStage().then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchCategoryChildren({ id: node.data.value }).then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf:
                                level >=
                                (item.children.length > 0 ? level + 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            }
        },
        fetchClassification(node, resolve) {
            const { level } = node;
            if (!node.data) {
                fetchClassificationFirst({
                    courseCategoryId: this.category
                }).then(res => {
                    const nodes = Array.from(res).map(item => {
                        return {
                            value: item.id,
                            label: `${item.name}`,
                            leaf: level >= (item.children.length > 0 ? 1 : 0)
                        };
                    });
                    resolve(nodes);
                });
            } else {
                fetchClassificationChildren({ id: node.data.value }).then(
                    res => {
                        const nodes = Array.from(res).map(item => {
                            return {
                                value: item.id,
                                label: `${item.name}`,
                                leaf:
                                    level >=
                                    (item.children.length > 0 ? level + 1 : 0)
                            };
                        });
                        resolve(nodes);
                    }
                );
            }
        },
        toggleSelection() {
            this.$refs.table.clearSelection();
        }
    }
};
</script>

<style lang="scss" scoped>
p {
    display: inline-table;
}
</style>
